<template>
	<root-node class="FourZeroFour discenter flex-dir-c">
		<div class="discenter overhide">
			<svg-icon class="svgicon" name="404" />
		</div>
		<div>
			<n-button class="btn" type="primary" round @click="back(0)">
				{{ $t("error.backHome") }}
			</n-button>
			<n-button class="btn" type="primary" round @click="back(1)">
				{{ $t("error.backLast") }}
			</n-button>
		</div>
	</root-node>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";

const router = useRouter();

function back(index: number) {
	switch (index) {
		case 0:
			router.push("/dashboard");
			break;
		case 1:
			router.back();
			break;
	}
}
</script>

<style lang="scss" scoped>
.FourZeroFour {
	& > div:nth-child(1) {
		width: 320px;
		height: 160px;
		margin-bottom: 20px;
	}
}
.svgicon {
	transform: scale(20);
}
.btn:not(:first-child) {
	margin-left: 10px;
}
</style>
